<template>
  <div class="n">
    <header class="box1_head ">
      <div class="box_nav">
        <figure class="city">
          <img class="iconfont icon-dizhi" src="" alt="">
          <h6>东城区北京市政府
            <span>▽</span>
          </h6>
        </figure>
        <figure class="box_nav1">
          <section>
            <p>0°</p>
            <p>雨</p>
          </section>
          <i class="icon iconfont icon-tianqi3"></i>
        </figure>
      </div>
      <!-- <div class="nav2">
        <p>
          <a> 搜索商家丶商品名称</a>
        </p>

      </div>
      <ul class="ul">
        <li>星巴克</li>
        <li>炸鸡</li>
        <li>汉堡王</li>
        <li>饺子</li>
        <li>鸡排</li>
        <li>面条</li>
        <li>煲仔饭</li>
        <li>麦当劳</li>
      </ul> -->
    </header>
    <div class="nav2">
      <p>
        <a> 搜索商家丶商品名称</a>
      </p>

    </div>
    <div class="ul">
      <ul>
        <li>星巴克</li>
        <li>炸鸡</li>
        <li>汉堡王</li>
        <li>饺子</li>
        <li>鸡排</li>
        <li>面条</li>
        <li>煲仔饭</li>
        <li>麦当劳</li>
      </ul>
    </div>

    <swiper :options="swiperOption" ref="mySwiper" class="swp">
      <!-- slides -->
      <swiper-slide>
        <div class="swip">
          <dl>
            <dt><img src="//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>美食</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"></dt>
            <dd>晚餐</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/c/3c/0184f5b3fa72f295fc01864734218jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>商超便利</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>果蔬生鲜</dd>
          </dl>
          <!-- </div>
                <div class="swip"> -->
          <dl>
            <dt><img src="//fuss10.elemecdn.com/1/a5/b4aa9dd27ff21d0a76bb0da550fd7jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>炸鸡炸串</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/6/74/785eafaf358fa6b18df37c64c3510jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>大牌5折</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>甜品饮品</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/b/e1/58aa34ef194d216c9f2328f603588jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>医药健康</dd>
          </dl>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="swip">
          <dl>
            <dt><img src="//fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>浪漫鲜花</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>麻辣烫</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/7/43/0947110c24c620a767745054d798bjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>地方菜系</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"></dt>
            <dd>披萨意面</dd>
          </dl>
          <!-- </div>
                <div class="swip"> -->
          <dl>
            <dt><img src="//fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"></dt>
            <dd>新店特惠</dd>
          </dl>
          <dl>
            <dt><img src="//fuss10.elemecdn.com/9/3f/cd951a6dbc7ecc5b12e24e9f8a124jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""></dt>
            <dd>快餐便当</dd>
          </dl>

        </div>
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>

    </swiper>
    <div class="tupian">
      <img src="https://fuss10.elemecdn.com/3/c8/45b2ec2855ed55d90c45bf9b07abbpng.png?imageMogr/format/webp/thumbnail/!710x178r/gravity/Center/crop/710x178/" alt="">
    </div>
    <div class="banner">
      <div class="top1">
        <div class="sp">
          <span>-</span>
          <span>推荐商家</span>
          <span>-</span>
        </div>
        <router-link class="nei" v-for="(v,i) in list" :key="i" :to="v.path">
          <div class="shang1">
            <div class="img1">
              <img :src="v.img">
            </div>

            <div class="left">
              <p>
                <span class="pin">品牌</span>
                <span class="jiacu">{{v.p}}</span>
              </p>
              <p>
                <span class="pin">品牌</span>
                <span>{{v.p1}}</span>
              </p>
              <div class="nei1">
                <div>
                  <span>{{v.s1}}</span>
                  <span>{{v.s2}}</span>
                </div>
                <div>
                  <span>1.15km</span>
                  <span class="right">48分钟</span>
                </div>
              </div>
              <div class="nei2">口碑人气好店</div>
            </div>
          </div>
          <div class="xia1">
            <div class="xia2"></div>
            <div class="xia3">
              <div>
                <span class="sp1">首</span>
                新用户下单立减17元
              </div>
              <div>
                <span class="sp2">首</span>满25减7，满40减12</div>
            </div>
          </div>
        </router-link>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      list: [
        {
          path: "/xq",
          img:
            "//fuss10.elemecdn.com/7/b1/56a13d655f5a09b28e5bdfd2a5362jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
          p: "北京麦当劳祈年大街餐厅",
          p1: "4.5月售462单",
          s1: "¥20起送",
          s2: "配送费¥7"
        },
        {
          path: "/xq",
          img:
            "//fuss10.elemecdn.com/f/bf/3cdc8d5fbf543cc1df15b1cbcc00dpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
          p: "魏家凉皮（协和店）",
          p1: "4.5月售462单",
          s1: "¥20起送",
          s2: "配送费¥7"
        },
        {
          path: "/xq",
          img:
            "//fuss10.elemecdn.com/a/b3/78e4a7079948628fcf617162a6ff6jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
          p: "必胜客宅急送（磁器口店）",
          p1: "4.5月售1058单",
          s1: "¥0起送",
          s2: "配送费¥9"
        },
        {
          path: "/xq",
          img:
            "//fuss10.elemecdn.com/8/c9/f86e8a367e686a158f047fe62ebbcpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
          p: "榴莲千层盒子",
          p1: "4.5月售5030单",
          s1: "¥0起送",
          s2: "配送费¥9"
        },
        {
          path: "/xq",
          img:
            "//fuss10.elemecdn.com/a/2a/5fd158b2803f19742462cd5b786afjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
          p: "望京小腰(北京站店)",
          p1: "4.5月售1020单"
        }
      ]
    };
  }
};
</script>

<style lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}

.n {
  width: 100%;
  border-radius: 2%;
  .box1_head {
    background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
    .px2rem(height,65);
    .box_nav {
      display: flex;
      .px2rem(height, 65);
      justify-content: space-between;
      .city {
        width: 65%;
        display: flex;
        align-items: center;
        img {
          margin: 0 0.2rem;
          .px2rem(width, 30);
          .px2rem(height, 30);
        }
        h6 {
          .px2rem(font-size, 24);
          display: flex;
          color: #ffffff;
        }
      }
      .box_nav1 {
        margin: 0 0.3rem;
        width: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        section {
          p {
            .px2rem(font-size, 25);
            color: #fff;
          }
        }
        i {
          .px2rem(font-size, 40);
          color: green;
        }
      }
    }
    // .nav2 {
    //   width: 100%;
    //   .px2rem(height, 100);
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   z-index: 999;
    //   position: sticky;
    //   top: 0;
    //   // background: rgb(0, 134, 255);
    //   background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
    //   p {
    //     width: 80%;
    //     top: 0;
    //     z-index: 999;
    //     background: #fff;
    //     text-align: center;
    //     .px2rem(height, 60);
    //     .px2rem(font-size, 20);
    //     .px2rem(line-height, 60);
    //   }
    // }
    // ul {
    //   // .px2rem(margin-top,80);
    //   display: flex;
    //   .px2rem(height, 80);
    //   .px2rem(font-size, 15);
    //   .px2rem(line-height, 80);
    //   li {
    //     width: 1/8*100%;
    //     text-align: center;
    //     color: #fff;
    //   }
    // }
  }
  .nav2 {
    width: 100%;
    .px2rem(height, 100);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    position: sticky;
    top: 0;
    // background: rgb(0, 134, 255);
    background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
    p {
      width: 80%;
      top: 0;
      z-index: 999;
      background: #fff;
      text-align: center;
      .px2rem(height, 60);
      .px2rem(font-size, 20);
      .px2rem(line-height, 60);
    }
  }
  .ul {
    width: 100%;
    .px2rem(height, 80);
    .px2rem(font-size, 15);
    .px2rem(line-height, 80);
    background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
    ul {
      display: flex;
      li {
        width: 1/8*100%;
        text-align: center;
        color: #fff;
      }
    }
  }
  .swp {
    width: 100%;
    .px2rem(height,345);
    // background: red;
    .swip {
      width: 100%;
      .px2rem(height,170);
      display: flex;
      flex-wrap: wrap;
      dl {
        width: 25%;
        .px2rem(height,170);
        text-align: center;
        dt {
          img {
            .px2rem(width,130);
            .px2rem(height,130);
          }
        }
        dd {
          .px2rem(font-size,25);
          color: #555;
        }
      }
    }
  }
  .tupian {
    width: 100%;
    .px2rem(height,200);
    img {
      width: 100%;
       .px2rem(height,200);
    }
  }
  .banner {
    width: 100%;
    border-top: 5px solid #ccc;
    .px2rem(margin-top,10);
    margin-bottom: 60px;
    .top1 {
      width: 100%;
      // .px2rem(margin-top,80);
      .sp {
         .px2rem(margin-top,80);
        .px2rem(height,40);
        .px2rem(line-height,40);
        display: flex;
        justify-content: center;
        span {
          .px2rem(font-size,40);
        }
      }
    }
    .nei {
      .px2rem(height,310);
      width: 100%;
      border-bottom: 1px solid #cccccc;
      .shang1 {
        .px2rem(height,190);
        width: 100%;
        // background: red;
        
        display: flex;
        .px2rem(margin-top,20);
        .img1 {
          width: 25%;
          img {
            width: 80%;
             .px2rem(height,150);
            margin: 10% 10%;
          }
        }

        .left {
          width: 75%;
          .px2rem(padding-left,20);
          border-bottom: 1px dashed #cccccc;
          p {
            width: 100%;
            .px2rem(margin-top,10);
            .px2rem(height,30);
            .px2rem(line-height,30);
            .px2rem(font-size,25);
            .jiacu {
              font-weight: bolder;
            }
            //  font-weight: bolder;
            .pin {
              background: yellow;
            }
          }
          .nei1 {
            width: 100%;
            .px2rem(margin-top,10);
            .px2rem(height,30);
            .px2rem(line-height,30);
            .px2rem(font-size,20);
            display: flex;
            justify-content: space-between;
            .right {
              padding-right: 10px;
            }
          }
          .nei2 {
            width: 100%;
            .px2rem(height,30);
            .px2rem(line-height,30);
            .px2rem(margin-top,20);
            .px2rem(font-size,25);
          }
        }
      }
      .xia1 {
        width: 100%;
        .px2rem(height,120);
        display: flex;
        align-items: center;
        .px2rem(font-size,25);
        .xia2 {
          width: 25%;
          .px2rem(height,120);
        }
        .xia3 {
          .px2rem(height,120);
          width: 75%;
          div {
            .px2rem(padding-left,20);
            .px2rem(margin-top,20);
            .sp1 {
              background: #70bc46;
            }
            .sp2 {
              background: #f07373;
            }
          }
        }
      }
    }
  }
}
</style>
